<template>
    <div class="content-box">
        <!-- 搜索地址 -->
        <div class="search-container">
            <div class="input-container">
                <el-form :model="myForm" ref="myForm" label-width="85px" class="my-el-form">
                    <el-form-item label="车牌号：" prop="carLicense">
                        <el-input v-model="myForm.carLicense" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆状态：" prop="inPark">
                        <el-select v-model="myForm.inPark" placeholder="请选择" clearable>
                            <el-option label="在场" value="YES"></el-option>
                            <el-option label="离场" value="NO"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="button-container">
                <el-button @click="handleReset('myForm')">重置</el-button>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </div>
        </div>
        <!-- 展示表格 -->
        <div class="container">
            <div class="table-container">
                <el-table ref="Table1" :data="list" style="width: 100%" border>
                    <el-table-column label="车场名称" align="center">
                        <template slot-scope="scope">{{ scope.row.parkingLotName }}</template>
                    </el-table-column>
                    <el-table-column label="车牌号码" align="center">
                        <template slot-scope="scope">{{ scope.row.carLicense }}</template>
                    </el-table-column>
                    <el-table-column label="停车类型" align="center">
                        <template slot-scope="scope">{{ scope.row.carTypeName }}</template>
                    </el-table-column>
                    <el-table-column label="入场时间" align="center" width="180">
                        <template slot-scope="scope">{{ scope.row.entTime }}</template>
                    </el-table-column>
                    <el-table-column label="离场时间" align="center"  width="180">
                        <template slot-scope="scope">{{ scope.row.exitTime || '-' }}</template>
                    </el-table-column>
                    <el-table-column label="停车时长" align="center"  width="180">
                        <template slot-scope="scope">{{ scope.row.parkingTime || '-' }}</template>
                    </el-table-column>
                    <el-table-column label="应收金额" align="center">
                        <template slot-scope="scope">{{ scope.row.payAmount || '-' }}</template>
                    </el-table-column>
                    <el-table-column label="车辆状态" align="center">
                        <template slot-scope="scope">{{ parkStatusOpt[scope.row.parkingStatus] }}</template>
                    </el-table-column>
                    <el-table-column label="支付状态" align="center">
                        <template slot-scope="scope">{{ payStatusOpt[scope.row.payStatus] }}</template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="pagination-area">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[10, 20, 50]"
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { recordPage } from '@/api/car';

const defaultListQuery = {
    pageNum: 1,
    pageSize: 10
};

export default {
    data() {
        return {
            listQuery: Object.assign({}, defaultListQuery),
            list: [],
            total: 1,
            listLoading: true,
            myForm: {
                carLicense: '',
                inPark: ''
            },
            parkListOpt: [], //下拉选择
            showTime: true,
            parkStatusOpt: {
                TO_BE_IN: '待入场',
                IN_PARKING: '在场',
                TO_BE_LEAVE: '待离场',
                LEAVE: '离场'
            },
            payStatusOpt: {
                UN_NEED_PAY: '无需支付',
                PAY_SUCCESS: '已支付',
                PAY_FAIL: '支付失败',
                RECOVERED: '已追缴',
                LEAVE_NOW_PAY_LATER: '后付费'
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        handleSizeChange(val) {
            // 改变列表显示条数
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            // 改变列表显示页数
            this.listQuery.pageNum = val;
            this.getList();
        },

        getList() {
            // 获取数据列表
            this.listLoading = true;
            recordPage(this.listQuery)
                .then((res) => {
                    this.listLoading = false;
                    this.list = res.data.records;
                    this.total = Number(res.data.total);
                })
                .catch((err) => {
                    this.listLoading = false;
                });
        },
        handleReset(formName) {
            //重置选项
            this.$refs[formName].resetFields();
            this.listQuery = Object.assign({}, defaultListQuery); // 清空输入框内容
            this.getList(); // 刷新列表并初始化
        },
        handleSearch() {
            //搜索;
            this.listQuery.carLicense = this.myForm.carLicense;
            this.listQuery.inPark = this.myForm.inPark;
            this.listQuery.pageNum = 1;
            this.getList();
        }
    }
};
</script>
<style scoped>
.myForm ::v-deep .el-form-item__content > div {
    width: 90%;
}
.button-container {
    padding-bottom: 15px;
}
</style>
